<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Column</title>
  </head>

  <body>
    <script src="../../build/deps.js"></script>
    <script src="../../lib/datav.js"></script>
    <script src="../../lib/charts/column.js"></script>    
    <div id="chart"></div>
    <script>
    var source = [
      ['X','2012/3/01',18],
      ['X','2012/3/02',102],
      ['X','2012/3/03',102],
      ['X','2012/3/04',60],
      ['Y','2012/3/05',46],
      ['Z','2012/3/06',102],
      ['X','2012/3/07',200],
      ['Z','2012/3/08',102],
      ['Y','2012/3/09',12],
      ['X','2012/3/10',86],
      ['Z','2012/3/11',102],
      ['Y','2012/3/12',158],
      ['X','2012/3/13',14],
      ['Y','2012/3/14',190],
      ['Z','2012/3/15',102],
      ['X','2012/3/16',314],
      ['Y','2012/3/17',336],
      ['Z','2012/3/18',336],
      ['X','2012/3/19',72],
      ['Y','2012/3/20',124],
      ['Z','2012/3/21',336],
      ['X','2012/3/22',42],
      ['Y','2012/3/23',74],
      ['Z','2012/3/24',336],
      ['X','2012/3/25',418],
      ['Y','2012/3/26',418],
      ['Z','2012/3/27',418],
      ['X','2012/3/28',68],
      ['Y','2012/3/29',324],
      ['Z','2012/3/30',336],
      ['X','2012/3/31',68]
    ];

    var column = new Column("chart", {
      "width": 980,
      "height": 600,
      "barWidth": 20
    });
    column.setSource(source, {
      column: undefined,
      x: 1,
      value: 2
    });
    column.render();
    </script>
  </body>
</html>